{%extends 'layout.html'%}
{%block body%}
<link type='text/css' rel='stylesheet' href="{{url_for('static', filename='css/pagination.css') }}"/>
<script type='text/javascript' src="{{url_for('static', filename='js/jquery.form.js') }}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/jquery-ui-timepicker-addon.js') }}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/datetime.js') }}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/jquery.pagination.js') }}"></script>
<script type='text/javascript' src="{{url_for('static', filename='js/invite-dlg.js') }}"></script>
<script>
	$(document).ready(function() { 
	    var options = { 
	        beforeSubmit:  function(){
	        	
	        },  // pre-submit callback 
	        success:       function(response){
	        	$('#upload-dlg').dialog('close');
	        	$('img#cover').attr('src', response);
	        }  // post-submit callback 
	    }; 
	 	$('#invite-dlg').dialog('option', 'buttons', {'保存': function(){
	 		$('#invite-dlg').dialog('close');
	 	}});
	    // bind form using 'ajaxForm' 
	    $('form#upload-photo').ajaxForm(options); 	    
	    $('#upload-dlg').dialog({
	    	autoOpen: false,
	    	modal: true,
	    	title: '选择图片',
	    	width: 500,
	    });
		$('#open-upload').click(function(){
			$('#upload-dlg').dialog('open');	
		});
	    $('#save-candidates').button().click(function(){
	    	$('#invite-dlg').dialog('close');
	    });
	    $('#create-form').submit(function(){
	    	var candidates_str = get_candidates_str();
	    	$('#invite-list').attr('value', candidates_str);
	    });
	    $('#create-form').validationEngine();
	}); 	
</script>
	<div class='left-panel'>
		<div class='top-panel'>&nbsp</div>
		<div class='mid-panel ui-widget-content'>
			<img id='cover' src='{{image}}' class='act-img'/>
		</div>
		<div class='bottom-panel'>
			<p><button class='button' id='open-upload'>选择图片</button></p>
			<div id='upload-dlg'>
				<form method='post' action='/activity/uploadPhoto' enctype='multipart/form-data' id='upload-photo'>
					<input type='hidden' name='id'/>
					{{csrf_token()}}
					<input type='file' class='button' name='photo'/>
					<input type='submit' value='上传' class='button' id='upload-photo'/>
				</form> 
			</div>
			
		</div>
	</div>
	<div class='right-panel'>
		<div class='ui-state-active top-panel caption'>创建活动</div>
		<div class='mid-bottom-panel ui-widget-content'>			
			<form action='' method='post' id='create-form'>
				<input type='hidden' name='invite-list' id='invite-list'/>
				<table>
					<thead>
						{%if form.errors%}
						<div>{{form.errors}}</div>
						{%endif%}
					</thead>
					<tbody>
						<tr>
							<th>{{form.title.label}}*</th>
							<td>{{form.title(class='validate[required]')}}</td>
						</tr>
						<tr>
							<th>{{form.activity_type.label}}*</th>
							<td>{{form.activity_type(class='validate[required]')}}</td>
						</tr>
						<tr>
							<th>{{form.start_time.label}}</th>
							<td>{{form.start_time(class='vDateTimeField')}}</td>
						</tr>
						<tr>
							<th>{{form.end_time.label}}</th>
							<td>{{form.end_time(class='vDateTimeField')}}</td>
						</tr>
						<tr>
							<th>{{form.activity_place.label}}*</th>
							<td>{{form.activity_place(class='validate[required]')}}</td>
						</tr>
						<tr>
							<th>{{form.description.label}}</th>
							<td>{{form.description()}}</td>
						</tr>
						<tr>
							<th></th>
							<td>{{form.need_approve()}}{{form.need_approve.label}}</td>
						</tr>
						<tr>
							<th></th>
							<td>{{form.allow_invitee_invite()}}{{form.allow_invitee_invite.label}}</td>
						</tr>
						<tr>
							<th></th>
							<td>{{form.is_public()}}{{form.is_public.label}}</td>
						</tr>
						<tr>
							<th></th>
							<td><input type='submit' value='创建' class='button'/> <a class='button' id='invite'>邀请</a></td>
						</tr>
					</tbody>
				</table>
				{{csrf_token()}}
				<div id='invite-dlg'>
					<div id='invite-dlg-candidates'>
						
					</div>
				</div>
			</form>
		</div>
	</div>
{%endblock%}
